<div id="leftBar">   
    <div class="left-bar-menu" ng-controller="LeftBarMenuController">
        <ul class="nav nav-pills nav-stacked">
            <li><a href ng-click="showHome()">{{'registration_and_data_entry'| translate}}</a></li>
            <li><a href ng-click="showReportTypes()">{{'reports'| translate}}</a></li>
        </ul>
    </div>    
</div>
<div id="mainPage">
    <h1>{{'tracker_reports'| translate}}</h1>
    <div style="width: 90%;" class="row col-sm-12">        
        <div class="col-sm-6 report-type-container" ng-click="programSummary()">
            <h2><small><i class="fa fa-list-alt fa-2x black"></i></small><span class="horizontal-spacing">{{'program_summary'| translate}}</span></h2>
            {{'program_summary_description'| translate}}
        </div>
        <div class="col-sm-6 report-type-container" ng-click="programStatistics()">
            <h2><small><i class="fa fa-bar-chart fa-2x black"></i></small><span class="horizontal-spacing">{{'program_statistics'| translate}}</span></h2>
            {{'program_statistics_description'| translate}}
        </div>
        <div class="col-sm-6 report-type-container" ng-click="upcomingEvents()">
            <h2><small><i class="fa fa-clock-o fa-2x black"></i></small><span class="horizontal-spacing">{{'upcoming_events'| translate}}</span></h2>
            {{'upcoming_events_description'| translate}}
        </div>
        <div class="col-sm-6 report-type-container" ng-click="overdueEvents()">
            <h2><small><i class="fa fa-bell-o fa-2x black"></i></small><span class="horizontal-spacing">{{'overdue_events'| translate}}</span></h2>
            {{'overdue_events_description'| translate}}
        </div>
    </div>
</div>